<template>
   <div class=''>
        <van-row>
            <van-col span="6">
                <img :src="avatar" alt="" srcset="" width="80%">
            </van-col>
            <van-col span="10"  @click="isLoginShow">{{nickname}}</van-col>
            <van-col class="right" span="8">
                <van-icon name="arrow"></van-icon>
            </van-col>
        </van-row>
        <van-grid square>
            <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
        </van-grid>

        <div class="login-modal" v-if="loginShow">
            <div class="close-modal" @click="loginShow = !loginShow"></div>
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
                </van-form>
        </div>
   </div>
</template>

<script>
import { goLogin } from "../request/api"
export default {
    data() {
        return {
            username: '',
            password: '',
            avatar:require("@/assets/logo.png"),
            loginShow:false,
            // avatar:'',
            nickname:'用户登录',
        }
    },
    created(){
        // 组件创建前先判断是有用户信息
        let token = localStorage.getItem("token")
        if(token){
            this.avatar = JSON.parse(localStorage.getItem("userInfo")).avatar
            this.avanicknametar = JSON.parse(localStorage.getItem("userInfo")).nickname
        }
    },
    methods:{
        isLoginShow(){
            //判断是否已经登录
            if(localStorage.getItem("token")){
                this.$toast("已经登录")
                return
            }
            this.loginShow = !this.loginShow
        },
        onSubmit(values) {
            // goLogin()
            let data = {
                username:values["用户名"],
                pwd:values["密码"]
            }
            goLogin(data)
            .then(res=>{
                console.log(res)
                if(res.errno==0){
                    this.$toast("登录成功！")
                    localStorage.setItem("token",res.data.token)
                    localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo))
                    setTimeout(()=>{
                        this.loginShow = false
                    },1000)
                    this.avatar = res.data.userInfo.avatar
                    this.nickname = res.data.userInfo.nickname
                }else{
                    this.$toast(res.errmsg)
                }
            })
            .catch(err=>{})
        },
    }
}
</script>
<style lang="less" scoped>
    .van-row{
        padding: .20rem;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, .7);
        font-size: .18rem;
        color: #fff;
        img{
            box-sizing: border-box;
            // margin: .1rem;
            background: #fff;
            border-radius: 50%;
        }
        .right{
            text-align: right;
        }
    }
    .login-modal{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .7);
        z-index: 99;
        display:flex;
        align-items:center;
        // vertical-align:middle;
        .van-form{
            margin: 0 auto;
        }
        .close-modal{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
</style>